<template>
  <CenterVue>
    <div class="draw">
      <span>| 商品订单 ></span> 订单列表
      <a-form>
        <div class="tool">
          <a-select
            default-value="请选择"
            :name="mySelection"
            style="width: 150px;"
            @change="handleSelect"
          >
            <a-select-option
              value="请选择"
              disabled
            >
              请选择
            </a-select-option>
            <a-select-option value="orderCode">
              订单编号
            </a-select-option>
            <a-select-option value="orderStatus">
              订单状态
            </a-select-option>
          </a-select>
          <a-input
            style="width: 50%"
            :placeholder="Tips"
          />
          <a-button
            type="primary"
            icon="search"
          >
            Search
          </a-button>
        </div>
      </a-form>
      <a-input-group compact />
      <div class="my_table">
        <template>
          <a-table
            :columns="columns"
            :data-source="data"
            :scroll="{y: 600 }"
            :pagination="pagination"
            :current="pagination.current"
            @change="tableChange"
            bordered
          >
            <template
              slot="action"
              slot-scope="record"
            >
              <a-button
                type="primary"
                slot="action"
                @click="getInfo(record)"
              >
                详情
              </a-button>
              <a-button
                type="danger"
                slot="action"
                @click="showDrawer"
              >
                修改
              </a-button>
            </template>
          </a-table>
        </template>
      </div>
      <!--订单修改   只能修改订单状态 -->
      <a-drawer
        title="订单详情 ~/~ 订单修改"
        placement="right"
        :width="720"
        :closable="false"
        :visible="visible"
        :get-container="false"
        :wrap-style="{ position: 'absolute' }"
        @close="onClose"
      >
        <!--form-->
        <div>
          <a-form
            :form="form"
            layout="vertical"
            hide-required-mark=""
          >
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="订单编号:">
                  <a-input
                    :value="item.id"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="订单金额:">
                  <a-input
                    :value="item.amount"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="商品名称:">
                  <a-input
                    :value="item.name"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商品数量:">
                  <a-input
                    :value="item.units"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="收件人:">
                  <a-input
                    :value="item.petMaster"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="联系方式:">
                  <a-input
                    :value="item.phone"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="收货地址:">
                  <a-input
                    :value="item.address"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="订单状态:">
                  <a-select
                    default-value="请选择"
                    name="status"
                    style="width: 326px; border: 1px solid dodgerblue;border-radius: 3px"
                  >
                    <a-select-option
                      value="请选择"
                      disabled
                    >
                      请选择
                    </a-select-option>
                    <a-select-option value="已完成">
                      已完成
                    </a-select-option>
                    <a-select-option value="未完成">
                      未完成
                    </a-select-option>
                    <a-select-option value="已付款">
                      已付款
                    </a-select-option>
                    <a-select-option value="未付款">
                      未付款
                    </a-select-option>
                    <a-select-option value="已发货">
                      已发货
                    </a-select-option>
                    <a-select-option value="未发货">
                      未发货
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-button
          :style="{ marginRight: '20px' }"
          @click="onClose"
        >
          取消
        </a-button>
        <a-button
          type="primary"
          @click="onClose"
        >
          提交
        </a-button>
      </a-drawer>
      <!--订单详情  model-->
      <div>
        <a-modal
          v-model="modalVisible"
          title="商品订单 ~/~ 订单详情"
          centered
          :width="800"
          @ok="modalVisible = false"
        >
          <div>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="订单编号:">
                  <a-input
                    :value="item.id"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="订单金额:">
                  <a-input
                    :value="item.amount"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="商品名称:">
                  <a-input
                    :value="item.name"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="商品数量:">
                  <a-input
                    :value="item.units"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="收件人:">
                  <a-input
                    :value="item.petMaster"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="联系方式:">
                  <a-input
                    :value="item.phone"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="收货地址:">
                  <a-input
                    :value="item.address"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="订单状态:">
                  <a-input
                    :value="item.status"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-modal>
      </div>
    </div>
  </CenterVue>
</template>

<script>
import CenterVue from '@/components/CenterVue'

const columns = [
  { title: '订单编号', width: 150, dataIndex: 'name', key: 'name', align: 'center' },
  { title: '收件人', width: 100, dataIndex: 'age', key: 'age', align: 'center' },
  { title: '联系方式', dataIndex: 'address', key: '1', width: 150, align: 'center' },
  { title: '收货地址', dataIndex: 'address', key: '2', width: 250, align: 'center' },
  { title: '状态', dataIndex: 'address', key: '3', width: 150, align: 'center' },
  {
    title: '操作',
    align: 'center',
    key: 'operation',
    width: 200,
    scopedSlots: { customRender: 'action' }
  }
]

const data = []
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edward ${i}`,
    age: 32,
    address: `London Park no. ${i}`
  })
}

export default {
  name: 'GoodsOrder',
  components: {
    CenterVue
  },
  data () {
    return {
      Tips: '支持订单编号,或者订单状态进行查询',
      mySelection: '',
      visible: false,
      modalVisible: false,
      data,
      columns,
      item: {
        id: 0,
        petMaster: '',
        phone: '',
        address: '',
        name: '',
        units: 0,
        amount: 0,
        status: ''
      },
      pagination: {
        total: 0,
        current: 1,
        defaultPageSize: 8,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20']
      }
    }
  },
  methods: {
    // table
    getInfo (obj) {
      this.modalVisible = true
      console.log('每页数据:' + this.pagination.defaultPageSize)
      console.log('当前页码:' + this.pagination.current)
      console.log(JSON.stringify(obj.name))
    },
    tableChange (e) {
      this.pagination.current = e.current
    },
    // 抽屉
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    showDrawer () {
      this.visible = true
    },
    onClose () {
      this.visible = false
    },
    // modal
    // 查询条件切换
    handleSelect (e) {
      console.log(e)
      if (e === 'orderCode') {
        this.Tips = '请输入订单编号,进行查询. eg. S2333212...'
      } else if (e === 'orderStatus') {
        this.Tips = '请输入订单状态,进行查询. eg.已完成,未完成,已发货,已收货,未付款,已付款...'
      }
    }
  }
}
</script>

<style scoped>
.draw {
  height: 800px;
  width: 1200px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ebedf0;
  borderRadius: 2px;
  padding: 48px;
  textAlign: center;
  background: #fafafa
}

.tool {
  margin-top: 10px;
  display: flex;
}

.my_table {
  margin-top: 10px;
}

span {
  font-weight: bolder;
  font-size: 25px;
}
</style>
